<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-btn color="primary" @click="$router.push('/')" class="mb-4">
          <v-icon start>mdi-home</v-icon>返回主页
        </v-btn>
      </v-col>
    </v-row>
    <v-card>
      <v-card-title>API 测试</v-card-title>
      <v-card-text>
        <v-btn @click="testGetRooms" :loading="loading" color="primary">
          测试获取会议室列表
        </v-btn>
        
        <div v-if="result" class="mt-4">
          <h3>API 响应结果：</h3>
          <pre>{{ JSON.stringify(result, null, 2) }}</pre>
        </div>
        
        <div v-if="error" class="mt-4">
          <h3>错误信息：</h3>
          <v-alert type="error">
            {{ error }}
          </v-alert>
        </div>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
import api from '../services/api.js'

export default {
  name: 'TestApi',
  data() {
    return {
      loading: false,
      result: null,
      error: null
    }
  },
  methods: {
    async testGetRooms() {
      this.loading = true
      this.result = null
      this.error = null
      
      try {
        console.log('开始测试获取会议室列表...')
        const response = await api.getAllRooms()
        console.log('API响应:', response)
        this.result = response
      } catch (error) {
        console.error('API测试失败:', error)
        this.error = error.message || '未知错误'
        if (error.response) {
          this.error += `\n状态码: ${error.response.status}\n响应数据: ${JSON.stringify(error.response.data)}`
        }
      } finally {
        this.loading = false
      }
    }
  }
}
</script> 